---
title: "Field"
description: Field's a core piece every other component uses. It flexes reusable styles, showing up in inputs, labels, descriptions, and more.
order: 2
published: true
status: primitive
---

## Basic
Field is a wrapper component that provides context for form elements like labels, descriptions, and error messages.
<How toUse="forms/field/field-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/field
```

## Manual installation
```bash
npm i react-aria-components
```

<SourceCode toShow='field'/>


## Anatomy
```
import { Form } from "react-aria-components"
import { Button } from "@/components/ui/button"
import { Description, FieldError, Fieldset, Label, Legend } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { Text } from "@/components/ui/text"
import { TextField } from "@/components/ui/text-field"
```

```
<Form>
  <Fieldset>
    <Legend/>
    <Text/>

    <TextField isRequired name="name">
      <Label/>
      <Input />
      <FieldError />
      <Description/>
    </TextField>

    <div data-slot="control">
      <Button type="submit">Register</Button>
    </div>
  </Fieldset>
</Form>
```
